export const useLockContent = {
  code: `import { useState, useCallback, useRef } from 'react';

function useLock(asyncFn) {
  const [loading, setLoading] = useState(false);
  const asyncFnRef = useRef(null);
  asyncFnRef.current = asyncFn;
  
  const run = useCallback(async (...args) => {
    if (loading) return;
    setLoading(true);
    try {
      await asyncFnRef.current(...args);
    } finally {
      setLoading(false);
    }
  }, [loading]);

  return [loading, run];
}`,
  
  explanation: `useLock Hook用于防止异步函数重复执行，避免并发问题。

主要特性：
1. 自动防止重复调用
2. 提供loading状态
3. 自动错误处理
4. 支持任意参数传递

使用场景：
- 表单提交防重复
- API请求防重复
- 按钮点击防重复
- 任何需要防止并发操作的场景`,
  
  usage: `// 使用示例
const [loading, submitForm] = useLock(async (data) => {
  await api.submitForm(data);
});

// 在组件中使用
const handleSubmit = () => {
  submitForm(formData);
};

// 按钮状态
<button disabled={loading} onClick={handleSubmit}>
  {loading ? '提交中...' : '提交'}
</button>`,
  
  practice: {
    title: 'useLock 练习',
    description: '练习使用 useLock Hook 来防止异步函数重复执行'
  }
}
